<template>
	<Home ref='home' v-show="tabbarName === 'home'" :height="bodyHeight"/>
	<My ref='my' v-show="tabbarName === 'my'" :height="bodyHeight"/>

	<uv-tabbar ref="tabbarRef" :value="tabbarName" :fixed="true" @change="handleChangeTabbar">
		<uv-tabbar-item text="首页" name="home">
			<template v-slot:active-icon>
				<image class="icon" src="/pages_nbst/static/images/home-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/pages_nbst/static/images/home.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="客服">
			<template v-slot:active-icon>
				<image class="icon" src="/pages_nbst/static/images/kf.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/pages_nbst/static/images/kf.png"></image>
			</template>
		</uv-tabbar-item>
		<button style="position: absolute;left:33.33%;width: 33.33%;height: 100%;opacity: 0;" open-type="contact">客服</button>
		<uv-tabbar-item text="我的" name="my">
			<template v-slot:active-icon>
				<image class="icon" src="/pages_nbst/static/images/mine-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/pages_nbst/static/images/mine.png"></image>
			</template>
		</uv-tabbar-item>
	</uv-tabbar>

</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick,
		onMounted,
		computed,
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	import Home from '@/pages_nbst/views/home.vue'
	import My from '@/pages_nbst/views/my.vue'
	
	let query
	onLoad((q) => {
		query = q
		nextTick(() => {
			if (typeof(currentInstance.ctx.$refs[tabbarName.value]?._onShow) === 'function') {
				currentInstance.ctx.$refs[tabbarName.value]._onShow(query)
			}
		})
	})
	const tabbarName = ref('home')
	const tabbarRef = ref()
	const bodyHeight = computed(() => {
		if (tabbarRef.value?.placeholderHeight) {
			return  `calc(100% - ${tabbarRef.value.placeholderHeight}px)`
		} else {
			return  `100%`
		}
	})
	let currentInstance = getCurrentInstance()
	const handleChangeTabbar = (name) => {
		tabbarName.value = name
		nextTick(() => {
			if (typeof(currentInstance.ctx.$refs[name]?._onShow) === 'function') {
				currentInstance.ctx.$refs[name]._onShow(query)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>

<style>
	page {
		height: 100%;
	}
</style>